<template>
	<view class="qrcode-container">
		<view class="qrcode-card-main">
			<view style="position: absolute;top: 40rpx;left: 5%;width: 90%;">
				<view class="qrcode-card">
					<view class="qrcode-dateStr">{{dateStr}}</view>
					<view class="qrcode-datetime">{{dateTIme}}</view>
					<u-divider half-width="350" border-color="#a5a5a5" :use-slot='false'></u-divider>
					<view>
						<view class="show-name"  v-if="shoname">
							{{hideame(use.name)}}
						</view>
						<view v-else class="show-name">{{use.name}}</view>
						<view style="text-align: left;color: #2089F7;display: inline-block;" @click="showname">{{shoname? '显示': '隐藏'}}</view>
						<view class="canvas" style="width: 100%; margin: 40rpx auto;">
							<view style="width: 201px;height: 201px;border: solid 14rpx #18B566;">
								<canvas canvas-id="qrcode" style="width: 180px;height: 180px;" v-if='makeboolean'></canvas>
								<view v-else style="width: 180px;height: 180px;">未获取到二维码</view>
							</view>
						</view>
						<view class="qrcode-titel" style="padding: 0 0 15rpx 0;color: #14a158;">
							拥军码:凭此码可在上虞区范围内享受部分餐饮,酒店,美发,娱乐等消费折扣,部分景区免票等权益,更多功能即将开放,敬请关注
						</view>
						<view class="qrcode-titel" style="color: #8c8c8c;padding-bottom: 30rpx;font-size: 25rpx;">
							(下方信用等级为个人行为规范指数,可累积增长,积极参加活动可提升信用等级!)
						</view>
					</view>
				</view>
				<view class="qrcode-btn">
					<u-button shape="circle" :plain="false" :custom-style="customStyle">当前信用等级: {{use.creditRating}}级</u-button>
				</view>
			</view>
			
		</view>
		<view class="qrcode-content">
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
	import {getinfo} from '@/api/common.js'
	var formatM,formatD,formattimeH,formattimeMi;
	function format(Date) {
		var Y = Date.getFullYear();
		var M = Date.getMonth() + 1;
		M = M < 10 ? '0' + M : M;// 不够两位补充0
		var D = Date.getDate();
		D = D < 10 ? '0' + D : D;
		var H = Date.getHours();
		H = H < 10 ? '0' + H : H;
		var Mi = Date.getMinutes();
		Mi = Mi < 10 ? '0' + Mi : Mi;
		var S = Date.getSeconds();
		S = S < 10 ? '0' + S : S;
		formatM = M;
		formatD = D;
		return  M + '月' + D + '日';
	}

	function formattime(Date) {
		var Y = Date.getFullYear();
		var M = Date.getMonth() + 1;
		M = M < 10 ? '0' + M : M;// 不够两位补充0
		var D = Date.getDate();
		D = D < 10 ? '0' + D : D;
		var H = Date.getHours();
		H = H < 10 ? '0' + H : H;
		var Mi = Date.getMinutes();
		Mi = Mi < 10 ? '0' + Mi : Mi;
		var S = Date.getSeconds();
		S = S < 10 ? '0' + S : S;
		formattimeH = H;
		formattimeMi = Mi;
		return H + ':' + Mi + ':'+S;
	}
	 export default {
		data() {
			return {
				tagsList: [],
				dateStr: format(new Date()),
				dateTIme: formattime(new Date()),
				hoursTip: '',
				shoname: true,
				customStyle:{
					'background-color': '#f75a55',
					color:'#fff'
				},
				makeboolean: true,
				use:{
					name:'---',
					idcard:'------------',
					tel: '---',
					idcardType: '---',
					busesNumber: '---',
					creditRating:  '---',
				},
			}
		},
		mounted() {
		let _that =this
		let cq =''
		let now = Date.now();
		setInterval(() => {
			_that.dateTIme = formattime(new Date())
		}, 999)
		// console.log(formatM,formatD,formattimeH,formattimeMi)
		uni.getStorage({
		    key: 'user',
		    success: function (res) {
				_that.use = res.data;
				cq = `${_that.use.name};${_that.use.idcard};${now};${_that.use.creditRating}`
				_that.make(cq);
		    }
		});
		
		},
		methods:{
			showname(){
				this.shoname = !this.shoname
			},
			hideame(name) {
				let newStr;
				if (name.length === 2) {
				newStr = name.substr(0, 1) + '*';
				} else if (name.length > 2) {
				  let char = '';
				  for (let i = 0, len = name.length - 2; i < len; i++) {
					char += '*';
				  }
				  newStr = name.substr(0, 1) + char ;
				} else {
				  newStr = name;
				}
				console.log(newStr)
				return newStr;
	        },
		
			make(Id) {
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})
				// getinfo(Id).then(res=>{
					if(Id){
						uQRCode.make({
							canvasId: 'qrcode',
							text: Id,
							size: 190,
							margin: 10,
							// foregroundColor:'#f75a55',
							foregroundColor:'#4abf6f',
							success: res => {
								console.log(res)
								this.qrcodeSrc = res
							},
							complete: () => {
								uni.hideLoading()
							}
						})
					}else {
						this.makeboolean = false
						uni.showToast({
						    title: '未获取到二维码',//res.message,
						    icon: 'none'
						})
					}
				// }).catch((error)=>{
				// 	this.makeboolean = false
				// 	uni.showToast({
				// 		    title: error.message,
				// 		    icon: 'none'
				// 	})
				// })
			  },
		},
	}
</script>

<style lang="scss" scoped>
	.qrcode-container {
		background-color: #f75a55;
		height: 100vh;
		width: 100%;
		.qrcode-card-main {
			height: 25vh;
			.qrcode-card {
				// position: absolute;
				// top: 40rpx;
				// left: 5%;
				// height: 800rpx;
				background-color: #fff;
				border-radius: 15rpx;
				-moz-box-shadow:0px 5px 9px #e2e1e1; 
				-webkit-box-shadow:0px 5px 9px #e2e1e1;
				 box-shadow:0px 5px 9px #e2e1e1;
				 .qrcode-dateStr{
					 margin-top: 20rpx;
					 font-size: 80rpx;
					 font-weight: bold;
					 text-align: center;
				 }
				 .qrcode-datetime{
					 font-size: 100rpx;
					 font-weight: bold;
					 text-align: center;
				 }
				 .show-name{
					 margin: 20rpx 0  0 30rpx;
					 text-align: left;
					 display: inline-block;
					 padding-right: 10rpx;
					 font-size: 40rpx;
				 }
			     .canvas {
					 display: flex;
					 flex-direction: column;
					 justify-content: center;
					 align-items: center;
					 margin-top: 50rpx;
					 text-align: center;
				 }
				 .qrcode-titel {
					 width: 80%;
					 margin: 0 auto;
					 text-align: center;
					 font-size: 27rpx;
					 color: #434343;
				 }
			}
			.qrcode-btn {
				margin: 0 auto 70rpx auto;
				padding-top: 45rpx;
				width: 90%;
				
			}
		}
		.qrcode-content {
			height: 75vh;
			background-color: #fff;
		}
	}
</style>
